{% extends "home.html" %}
{% block header %}profile{% endblock %}
{% block title %} {% endblock %}

{% block navpanel %}
  <ul>
  <li id="bt_back" class="button"><a href="/"><span>Back</span></a></li>
  <li id="bt_profile" class="button"><span>My Profile</span></li>
   {% if is_user_admin %}
    <li id="bt_admin_users" class="button"><a href="/admin/user/list"><span>Users List</span></a></li>
    <li id="bt_admin_recipes" class="button"><a href="/admin/recipes/list"><span>Recipes List</span></a></li>
  {% endif%}
  </ul>
{% endblock %}

{% block main%}

  <header>
    <h2>{{ formName }}</h2>
  </header>
  <form action="/profile/save" method="post">
    <div>nikname: {{usernickname}}</div>
    <div class="field">name: <input name="name" type="text" value="{{ user.name }}" /></div>
    <div class="field">midname: <input name="midname" type="text" value="{{ user.midname }}" /></div>
    
    <div class="field">surname: <input name="surname" type="text" value="{{ user.surname }}" /></div>
    <div class="field">birthday: <input id="birthday" name="birthday" type="text" value="{{ user.birthday }}"/> </div>
    <div class="field">e-mail: <input name="email" type="text" value="{{ user.user.email }}" /></div>
    <div class="field">city: <input name="city" type="text" value="{{ user.city }}" /></div>
    <div class="field">gender: 
      <select name="gender" id="gender" selected="{{ user.gender }}">
        <option>male</option>
        <option>female</option>
      </select></div>
    <div id="bt_save" class="button"><input type="submit" name="Submit" value="Save"></div>
  </form>
{% endblock %}

{% block footer %}
  <footer>
  {{config.JQUERY_REP}}
  {{config.JQUERYUI_REP}}
  <script src="/stat/i18n/jquery.ui.datepicker-ru.js"></script>
  <script src="/stat/i18n/jquery.ui.datepicker-en-GB.js"></script>
  <script src="/stat/i18n/jquery.ui.datepicker-de.js"></script>
  <script src="/stat/i18n/jquery.ui.datepicker-uk.js"></script>
  <script>
    $(function() {
      $("#birthday").datepicker($.datepicker.regional["ru"]);
      $("#birthday").datepicker( "option", { 
        changeYear: true,
        changeMonth: true
       });
    });
    $("#gender").val("{{ user.gender }}");
  </script>
  </footer>
{% endblock %}

